<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .cartlist{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .cartlist .wares{
            width: 280px;
            margin-bottom: 10px;
        }
        .cartlist .wares p{
            color: rgb(148, 160, 175);
            height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .cartlist .wares .prcie{
            color: rgb(245, 37, 37);
            font-size: 24px;
        }
        img{
            width: 280px;
        }
        .cartlist .wares:hover{
            box-shadow:5px 5px 10px rgba(29, 27, 27, 0.876);
        }
    </style>
</head>

<body>
    <div class="cartlist">
<!-- 渲染出购物车 -->
    </div>
    <script src="js/Jquery3.6.js"></script>
    <script>
        $.ajax({
            type: "get",
            url: "https://www.xiongmaoyouxuan.com/api/tab/1/feeds?start=60",
            success: function (res) {
                if(res.code==200){
                    showList(res.data.list)
                }
            },
            error:function(res){
                    alert("网络错误"+res.status)
                }
        })        
        function showList(list){
            let str=list.map((item,index)=>{
                return `<div class="wares" id="${item.id}">
                    <img src="${item.image}">
                    <p>${item.title}</p>
                    <div class="prcie">￥${item.price}</div>
                    </div>`
            }).join("")
            $(".cartlist").html(str);
            //绑定点击事件
            clicks()
        }
        function clicks(){
            $(".wares").on("click",function(){
                localStorage.setItem("id",this.id)
                location.href="商品列表.html"
            })
        }
    </script>
</body>

</html>